<template>
    <div class="im-iq-topTable">
        
        
        <el-table ref="receiveTable" size="mini"  border :data="resData"  style="width: 100%"  height="500" highlight-current-row>
        <el-table-column type="index" label="序号" width="50" :show-overflow-tooltip="true"> </el-table-column>
        <el-table-column prop="barcode" sortable label="条码" width="150" :show-overflow-tooltip="true"> </el-table-column>
        <el-table-column prop="aoCode" sortable label="AO号" width="150" :show-overflow-tooltip="true" > </el-table-column>
        <el-table-column prop="itemCode" sortable label="图号" width="150" :show-overflow-tooltip="true" > </el-table-column>
        <el-table-column prop="mProductNumber" sortable label="型号" width="150" :show-overflow-tooltip="true" > </el-table-column>
        <el-table-column prop="mParentNumber" sortable label="父型号" :show-overflow-tooltip="true" > </el-table-column>
        <el-table-column prop="qualityCode" sortable label="质量编号" width="150" :show-overflow-tooltip="true" > </el-table-column>
        <el-table-column prop="itemName" sortable label="物料名称" width="150" :show-overflow-tooltip="true" > </el-table-column>
        <el-table-column prop="invShop" sortable label="需求单位" width="150" :show-overflow-tooltip="true" > </el-table-column>
        <el-table-column prop="currentOnHandQty" sortable label="当前库存" show-overflow-tooltip> </el-table-column>
        <el-table-column prop="deliveryQty" sortable label="交接数量"> </el-table-column>
        <el-table-column prop="erpoutQty" sortable label="ERP出库数量"  show-overflow-tooltip> </el-table-column>
        <el-table-column prop="engagedQty" sortable label="非离库占用" show-overflow-tooltip> 
            <template slot-scope="scope">
                <el-button @click.native.prevent="showRowData(scope.row)" type="text" size="small">
                    {{ scope.row.engagedQty}}
                </el-button>
            </template>
        </el-table-column>
  
        <el-table-column prop="takeAwayEngagedQty" sortable label="离库占用" show-overflow-tooltip> </el-table-column>
        <el-table-column prop="inEmpCode" sortable label="入库人" :show-overflow-tooltip="true" > </el-table-column>
        <el-table-column prop="deliveryShop" sortable label="移交单位" :show-overflow-tooltip="true" > </el-table-column>
        <el-table-column prop="inventoryDate" sortable label="入库日期" width="140" :show-overflow-tooltip="true"> </el-table-column>
        <el-table-column prop="srmSupplyId" sortable label="供应商" :show-overflow-tooltip="true"> </el-table-column>
        <el-table-column prop="productCode" sortable label="机型"  :show-overflow-tooltip="true"> </el-table-column>
        <el-table-column prop="batchNo" sortable label="批次" :show-overflow-tooltip="true"> </el-table-column>
        <el-table-column prop="startLotNo" sortable label="架次" :show-overflow-tooltip="true"> </el-table-column>
        <el-table-column prop="xLimitLotNo" sortable label="限用架次" :show-overflow-tooltip="true"> </el-table-column>
        <el-table-column prop="REMARK" sortable label="备注" :show-overflow-tooltip="true"> </el-table-column>
        <el-table-column prop="wmsItemInventoryId" sortable label="台账id" :show-overflow-tooltip="true"> </el-table-column>
        <el-table-column prop="wmsDeliveryPlanId" sortable label="交接单id" :show-overflow-tooltip="true"> </el-table-column>
        <el-table-column
            fixed="right"
            label="操作"
            width="120">
            <template slot-scope="scope">
                <el-button
                @click.native.prevent="showRow(scope.row)"
                type="text"
                size="small">
                查看所在缓存箱
                </el-button>
            </template>
        </el-table-column>
      </el-table>
        <!-- 分页 -->
        <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNumber"
        :page-sizes="[10,20,50,100]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalCount">
        </el-pagination>

        <!--查看物料所在箱子列表-->
        <el-drawer
    title="物料所在缓存箱列表"
        :visible.sync="drawer.drawer"
        :direction="drawer.direction">
            <el-table :data="drawer.data" style="width: 100%">
                <el-table-column  prop="palletCode" label="缓存箱"> </el-table-column>
                <el-table-column  prop="itemQty" label="数量" > </el-table-column>
                <el-table-column  prop="erpoutQty" label="ERP出库数量" > </el-table-column>
            </el-table>
        </el-drawer>
    <!--查看非离库占用信息-->
        <el-drawer
    title="非离库占用数量详情"
        :visible.sync="drawerData.drawer"
        :direction="drawerData.direction">
            <el-table :data="drawerData.data" style="width: 10Q0%">
                <el-table-column  prop="engagedQty" label="占用数量"> </el-table-column>
                <el-table-column  prop="allotmentStatus" label="占用状态" > </el-table-column>
                <el-table-column  prop="startLotNo" label="架次" > </el-table-column>
            </el-table>
        </el-drawer>
    </div>
</template>
<script>
import request from "@/utils/request.js";
export default {
    name:"ImIqTopTable",
    data(){
        return{
             // 当前页数
            pageNumber: 1,
            // 数据总个数
            totalCount: 0,
            // 返回的数据数组
            resData: [],
            // 每页数据个数
            pageSize: 20,
            // 确认列表高亮参数
            stableIndex: 0,
            drawer:{
                drawer: false,
                direction:"rtl",
                data:[],
                queryParam:{}
            },
            drawerData:{
                drawer: false,
                direction:"rtl",
                data:[],
                queryParam:{}
            },
            queryParam:{}
        }
    },
    methods:{
        excelExport(){}
        ,

        // 每页个数改变
        handleSizeChange(val){
            this.pageSize = val
            this.$options.methods.doQuery.bind(this)();
        },
        // 页数改变
        handleCurrentChange(val) {
            this.pageNumber = val;
            this.$options.methods.doQuery.bind(this)();
        },
        showRow(row){//显示缓存箱
            this.drawer.queryParam = row;
            this.drawer.drawer = true;
            this.$options.methods.searchItemPallect.bind(this)();
        },
         showRowData(row){//显示非离库占用数量详情
            this.drawerData.queryParam = row;
            this.drawerData.drawer = true;
            this.$options.methods.searchDepartureOccupation.bind(this)();
        },
        searchDepartureOccupation(para){
            console.log("this.drawerData.queryParam",this.drawerData.queryParam);
            request.post("/WmsItemInventorySearch/searchDepartureOccupation",this.drawerData.queryParam).then((res)=>{
                console.log("非离库占用数量详情",res);
                this.drawerData.data = res.data;
            });
        },
        searchItemPallect(para){
            console.log("para",para);
            request.post("/WmsItemInventorySearch/queryItemPallet",this.drawer.queryParam).then((res)=>{
                console.log("缓存箱",res);
                this.drawer.data = res.data;
            });
        },
        doQuery(){
            request.post("/WmsItemInventorySearch/searchParamsByItem",{searchParam:this.queryParam,page:{currentPage:this.pageNumber,pageSize:this.pageSize}}).then((res)=>{
                this.resData = res.data.list;
                this.totalCount = res.data.total;
            });
        }
    },
    mounted() {
        this.$bus.$on("queryBtnClick",(e)=>{
            this.queryParam = e;
            this.$options.methods.doQuery.bind(this)();
        })
  }
}
</script>
<style scoped>
.im-iq-topTable {
    text-align: center;
}
</style>